<template>
  <div>
    <!-- 顶部 -->
    <div class="find-page">
      <van-nav-bar
        style="background: skyblue"
        left-arrow
        @click-left="$router.back()"
      >
        <template #right>
          <div class="all">
            <div class="topp" @click="goinCity">
              <span>上海</span>
              <van-icon name="arrow-down" />
            </div>
            <div class="toppp">
              <van-icon name="search" />
              <input type="text" placeholder="请输入小区或地址" />
            </div>
          </div>
          <van-icon name="search" size="18" />
        </template>
      </van-nav-bar>

      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
        <van-dropdown-item v-model="value3" :options="option3" />
        <van-dropdown-item v-model="value4" :options="option4" />
      </van-dropdown-menu>

      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <Afind v-for="(item, index) in list" :key="index" :item="item" />
      </van-list>
    </div>
    <!--  -->
  </div>
</template>

<script>
import { getRent ,getsearchhouse} from "@/api/user";
import Afind from "@/components/Afind.vue";
export default {
  components: {
    Afind,
  },
  name: "find-page",
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      value1: 0,
      value2: "a",
      value3: 'a',
      value4: "a",
      option1: [
        { text: "区域", value: 0 },
        { text: "新款商品", value: 1 },
        { text: "活动商品", value: 2 },
      ],
      option2: [
        { text: "方式", value: "a" },
        { text: "好评排序", value: "b" },
        { text: "销量排序", value: "c" },
      ],
      option3: [
        { text: "租金", value: "a" },
        { text: "好评排序", value: "b" },
        { text: "销量排序", value: "c" },
      ],
      option4: [
        { text: "筛选", value: "a" },
        { text: "好评排序", value: "b" },
        { text: "销量排序", value: "c" },
      ],
    };
  },
   computed: {
    city () {
      return this.$route.query.data
    }
  },
  methods: {
    goinCity() {
      this.$router.push("/city");
    },
    onLoad() {
      console.log(1);
    },
  },
  async created() {
    const { body } = await getRent();
    console.log(body);
    this.list = body;
  },
  async getSearch(){
   const res= await getsearchhouse()
   console.log(res);
  }
};
</script>

<style lang="less" scoped>
.all {
  margin-right: 40px;
  .topp {
    span {
      color: #000;
      font-size: 14px;
    }
    line-height: 30px;
    height: 30px;
    background-color: #fff;
    float: left;
  }
  .toppp {
    width: 180px;
    line-height: 30px;
    height: 30px;
    background-color: #fff;
    display: flex;
    .van-icon {
      margin-top: 5px;
      font-size: 18px;
    }
    input {
      border: none;
    }
  }
}
</style>
